<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/jquery-ui/custom-theme/jquery-ui-1.8.5.custom.css">
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
		<title>kei3</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				width:100%;
				font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
			}
			
			#contents{
				padding:20px;
				position:relative;
			}
			
			#app-title{
				display:inline;
			}
			
			#app-discription{
				display:inline;
				margin-left:5px;
				font-style:italic;
				color:#888888;
			}
			
			#main{
				margin-top:15px;
				margin-left:10px;
			}
			
			#table-panel{
				padding: 20px;
				display:inline-block;
				margin-bottom:15px;
			}
			
			#current-table-name{
				
			}
			
			#current-table{
				margin-top:15px;
				margin-left:10px;
				margin-right:20px;
				display:inline-block;
			}
			
			#current-table dd{
				margin-top:5px;
			}
			
			#current-table dd div{
				display:inline-block;
			}
			
			.entry{
				border-bottom: dashed 1px #999999;
			}
			
			.last{
				border-bottom: none;
			}
			
			#sum-line{
				border-bottom:  solid 1px #666666;
				margin-left:-5px;
				margin-right:-5px;
			}
			
			#sum{
				border-bottom: none;
			}
			
			.content{
				width:200px;
			}
			
			.amount{
				width:200px;
				text-align:right;
			}

			#entry-navi{
				margin-top:10px;
				display:inline-block;
				vertical-align:baseline;
			}
			
			#entry-navi dd{
				padding: 2px;
				border-bottom: dashed 1px #999999;
			}
			
			#entry-navi dd.last{
				border-bottom: none;
			}
			
			#entry-navi dd a{
				padding: 1px 5px 1px 5px;
				display:block;
				font-size: small;
			}
			
			#entry-navi dd a.enable:hover,
			#entry-navi dd a.enable:focus {
				background: #f3f3f3;
				color:#000;
				-moz-border-radius: 5px 5px;
				-webkit-border-radius: 5px 5px;
			}
			
			#entry-navi dd a.disable{
				color:#999999;
			}
			
			.hide{
				display:none;
			}
			
			#table-navi{
				margin-left:20px;
			}
			
			.ui-button,
			.ui-dialog{
				font-size:small;
			}
			
			.ui-dialog input{
				font-size:medium;
			}
			
			.ui-dialog label{
				display:block;
			}
			
		</style>
		<script type="text/javascript">
			$(function(){
				$('.ui-button').button();
				$('.ui-div').addClass('ui-widget-content ui-corner-all');
				
				$('#create-entry-form').dialog({
					autoOpen: false,
					width: 370,
					buttons: {
						'done': function(){
							var input = {
								content: $('#entry-content').val(),
								amount: $('#entry-amount').val()
							};
							createEntry(input);
						},
						'cancel': function(){
							$(this).dialog('close');
						} 
					},
					close: function(){
						$('#create-entry')
							.removeClass('disable')
							.addClass('enable');
					}
				});
				
				$('#delele-entry-form').dialog({
					autoOpen: false,
					width: 370,
					buttons: {
						'done': function(){
							var targets = [];
							$('.entry:has(input:checked)').each(function(){
								targets.push(this.id);
								$(this).remove();
							});
							
							var newEntries = [];
							sum = 0;
							if(targets.length == entries.length){
								$('#current-table').fadeOut();
								$('.entry-update').fadeOut();
							}else{
								$('#current-table .last').removeClass('last');
								$('#current-table .entry:last').addClass('last');
								
								$(entries).each(function(){
									var key = this.key
									var isDelete = false;
									$(targets).each(function(){
										if(this == key){
											isDelete = true;
										}
									});
									if(!isDelete){
										newEntries.push(this);
										sum += (this.amount - 0);
									}
								});
							}
							
							entries = newEntries;
							$('#sum .amount').html(formatAmount(sum));
							$('.check').hide().find('input:checkbox').attr('checked', false);
							$(this).dialog('close');
						},
						'cancel': function(){
							$(this).dialog('close');
						}
					},
					close: function(){
						$('#delete-entry')
							.removeClass('disable')
							.addClass('enable');
					}
				});
				
				$('#create-table-form').dialog({
					autoOpen: false,
					modal: true,
					width: 370,
					buttons: {
						'done': function(){
							var input = {
								'table-name': $('#table-name').val(),
							};
							
							$.getJSON('/table/put', input, function(result){
								$('#current-table').fadeOut(function(){
									$('.entry').remove();
									entries = [];
									sum = 0;
								});
								$('#current-table-name').text(result.data.name);
								$('.entry-update').fadeOut();
								$('#table-panel').fadeIn();								
							});
							
							$(this).dialog('close');
						},
						'cancel': function(){
							$(this).dialog('close');
						} 
					},
					close: function(){
						
					}
				});

				$('#delete-table-form').dialog({
					autoOpen: false,
					modal: true,
					buttons: {
						'done': function(){
							$('.entry-form').dialog('close');
							$('#table-panel').fadeOut(function(){
								$('#current-table').hide();
								$('.check').hide();
								$('.entry-update').hide();
							});
							$(this).dialog('close');
							entries = [];
							sum = 0;
						},
						'cancel': function(){
							$(this).dialog('close');
						} 
					},
					close: function(){
						
					}
				});
						
				$('#create-table').click(function(){
					$('#table-name').val('');
					$('#create-table-form').dialog('open');
				});
				
				$('#delete-table').click(function(){
					$('#delete-table-name').text($('#current-table-name').text());
					$('#delete-table-form').dialog('open');
				});
				
				$('#create-entry').click(function(){
					$(this)
						.removeClass('enable')
						.addClass('disable');
					$('#create-entry-form').dialog('open');
				});
				
				$('#delete-entry').click(function(){
					$('#delele-entry-form').dialog('open');
					$(this)
						.removeClass('enable')
						.addClass('disable');
					$('.check').show();
				});
				
				var entries = [];
				var sum = 0;
				
				var createEntry = function(entry){
					
					// DEBUG:
					entry.key = 'entry-' + (entries.length + 1);
					
					$('#current-table')
						.fadeIn()
						.find('.last').removeClass('last');
					
					var template = $('#entry-template');
					var newEntry = template.clone();
					
					newEntry
						.attr('id', entry.key)
						.addClass('entry last')
						.find('.content').text(entry.content).end()
						.find('.amount').text(formatAmount(entry.amount)).end();
					
					template.before(newEntry);
					newEntry.fadeIn();
					
					$('.entry-update').fadeIn();
					
					sum += (entry.amount - 0);
					$('#sum .amount').html(formatAmount(sum));
					
					entries.push(entry);
				}
				
				var formatAmount = function(num){
					num = '' + num;
					while(num != (num = num.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
					return num;
				}
				
			});
		</script>
    </head>
    <body>
    	<div id="contents">
    		<div id="header">
    			<h1 id="app-title">Kei3</h1>
    			<p id="app-discription">It's accouting application</p>
    		</div>
			<div id="main">
				<div id="table-panel" class="ui-div" style="display:none;">
					<h2 id="current-table-name"></h2>
					<dl id="current-table" style="display:none;">
<!--
						<dd id="entry-sample1" class="entry">
							<div class="content">あいうえおあいうえおあいうえおあいうえお</div>
							<div class="amount">123,456,789,012,345</div>
						</dd>
						<dd id="entry-sample2" class="entry">
							<div class="content">abcdefghijabcdefghij</div>
							<div class="amount">1,000</div>
						</dd>
						<dd id="entry-sample2" class="entry last">
							<div class="content">aaaaaaaaaaaaaaaaaaaa</div>
							<div class="amount">1,000</div>
						</dd>
-->
						<dd id="entry-template" style="display:none;">
							<div class="content"></div>
							<div class="amount"></div>
							<div class="check" style="display:none;"><input type="checkbox"/></div>
						</dd>
						<dd id="sum-line"></dd>
						<dd id="sum">
							<div class="content"></div>
							<div class="amount"></div>
						</dd>
					</dl>
					<div id="entry-navi">
						<dl>
							<dd><a id="create-entry" class="enable">Create new entry</a></dd>
							<dd class="entry-update" style="display:none;"><a id="delete-entry" class="enable">Delete entry</a></dd>
							<dd class="entry-update" style="display:none;"><a id="accounting" class="enable">Accounting</a></dd>
							<dd class="last"><a id="delete-table" class="enable">Delete this table</a></dd>
						</dl>
					</div>
				</div>
				<div id="table-navi">
					<button id="create-table" class="ui-button">Create new table</button>
					<button id="select-table" class="ui-button">Choice other table</button>
				</div>
			</div>
		</div>
		<div id="forms" class="hide">
			<div id="create-entry-form" title="Create new entry" class="entry-form">
				<label for="entry-summary">content:</label>
				<input type="text" name="content" id="entry-content" class="text ui-widget-content ui-corner-all" size="40" maxlength="20"/>
				<!-- <p class="warn" id="table-name.required">required</p> -->
				<label for="entry-amount">amount:</label>
				<input type="text" name="amount" id="entry-amount" class="text ui-widget-content ui-corner-all" size="40" maxlength="15"/>
			</div>
			<div id="create-table-form" title="Create new table">
				<label for="table-name">table name:</label>
				<input type="text" name="name" id="table-name" class="text ui-widget-content ui-corner-all" size="40" maxlength="20"/>
			</div>
			<div id="delele-entry-form" title="Delete entry" class="entry-form">
				<p>1. Check delete target</p>
				<p>2. Click「done」</p>
			</div>
			<div id="delete-table-form" title="Delete this table">
				<p>delete「<span id="delete-table-name"></span>」table ??</p>
			</div>
			<div id="accounting-form" title="Accounting">
				<h3>
					<span id="accounting-sum"></span> /
					 <input type="text" id="accounting-div" class="text ui-widget-content ui-corner-all" size="4" maxlength="2"/>
				</h3>
			</div>
		</div>
    </body>
</html>